<template>
  <div class="register-wrap">
    <div class="ms-title">账号注册</div>
    <span class="ms-line"></span>
    <div class="ms-register">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="0px"
        class="demo-ruleForm"
      >
        <div v-if="errorInfo">
          <span>{{ errInfo }}</span>
        </div>
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            show-password
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="type">
          <el-select v-model="form.type" placeholder="请选择角色类型">
            <el-option label="admin" value="admin"></el-option>
            <el-option label="traffic" value="traffic"></el-option>
            <el-option label="user" value="user"></el-option>
          </el-select>
        </el-form-item>
        <div class="register-btn">
          <el-button type="primary" @click="handleClick">注册</el-button>
          <el-button @click="tologin" style="margin: 5px 0px">登录</el-button>
        </div>
      </el-form>
    </div>
    <div class="register-box" id="demo">
      <div class="canvaszz"></div>
      <canvas id="canvas"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data() {
    return {
      identifyCodes: '1234567890',
      identifyCode: '',
      errorInfo: false,
      usertype: '',
      form: {
        username: '',
        password: '',
        validate: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        validate: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  mounted() {
    this.identifyCode = '';
    this.makeCode(this.identifyCodes, 4);
    this.usertype = this.$cookies.get('usertype');
    //宇宙特效
    ('use strict');
    var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      w = (canvas.width = window.innerWidth),
      h = (canvas.height = window.innerHeight),
      hue = 217,
      stars = [],
      count = 0,
      maxStars = 2500; //星星数量
    var canvas2 = document.createElement('canvas'),
      ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
      gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#CCC');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

    // End cache

    function random(min, max) {
      if (arguments.length < 2) {
        max = min;
        min = 0;
      }

      if (min > max) {
        var hold = max;
        max = min;
        min = hold;
      }

      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
      var max = Math.max(x, y),
        diameter = Math.round(Math.sqrt(max * max + max * max));
      return diameter / 2;
      //星星移动范围，值越大范围越小，
    }

    var Star = function () {
      this.orbitRadius = random(maxOrbit(w, h));
      this.radius = random(60, this.orbitRadius) / 18;
      //星星大小
      this.orbitX = w / 2;
      this.orbitY = h / 2;
      this.timePassed = random(0, maxStars);
      this.speed = random(this.orbitRadius) / 500000;
      //星星移动速度
      this.alpha = random(2, 10) / 10;

      count++;
      stars[count] = this;
    };

    Star.prototype.draw = function () {
      var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
        y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
        twinkle = random(10);

      if (twinkle === 1 && this.alpha > 0) {
        this.alpha -= 0.05;
      } else if (twinkle === 2 && this.alpha < 1) {
        this.alpha += 0.05;
      }

      ctx.globalAlpha = this.alpha;
      ctx.drawImage(
        canvas2,
        x - this.radius / 2,
        y - this.radius / 2,
        this.radius,
        this.radius
      );
      this.timePassed += this.speed;
    };

    for (var i = 0; i < maxStars; i++) {
      new Star();
    }

    function animation() {
      ctx.globalCompositeOperation = 'source-over';
      ctx.globalAlpha = 0.5; //尾巴
      ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
      ctx.fillRect(0, 0, w, h);

      ctx.globalCompositeOperation = 'lighter';
      for (var i = 1, l = stars.length; i < l; i++) {
        stars[i].draw();
      }

      window.requestAnimationFrame(animation);
    }

    animation();
  },
  methods: {
    tologin() {
      this.$router.push('/login');
    },
    handleClick() {
      this.$refs['form'].validate(() => {
        if (this.form.username == '') {
          // 检验通
          // 检验不通过
          this.$message({
            type: 'error',
            message: '用户名不能为空',
          });
        } else if (this.form.password == '') {
          // 检验不通过
          this.$message({
            type: 'error',
            message: '密码不能为空',
          });
        } else if (this.form.type == '') {
          // 检验不通过
          this.$message({
            type: 'error',
            message: '用户类型不能为空',
          });
        } else {
          setTimeout(() => {
            this.$http
              .post('/user/register', {
                user_name: this.form.username,
                user_password: this.form.password,
                user_type: this.form.type,
              })
              .then((res) => {
                console.log(res);
                if (res.code == 0) {
                  this.$message.success('注册成功');
                  // sessionStorage.setItem("username", this.form.username);
                } else {
                  this.$message.error('注册失败');
                }
              });
          }, 1000);
        }
      });
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = '';
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
      console.log(this.identifyCode);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.register-wrap {
  /* background-color: rgb(157, 166, 181);
  background-image: url(../../assets/v2-dc6e78ac3316ff07ccf1c4dac44800b1_r.jpg); */
  background-size: 100% 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

.ms-title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  color: #fff;
}
.ms-line {
  position: absolute;
  left: 670px;
  top: 285px;
  width: 350px;
  height: 1px;
  background-image: url(../../../img/bg3.png);
  /* background-color: red; */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}
.ms-register {
  position: absolute;
  left: 38%;
  top: 33%;
  width: 327px;
  height: 287px;
  background-image: url(../../../img/bg1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate((-50%, -50%));
  /* margin: -150px 0 0 -190px; */
  padding: 40px;
  border-radius: 5px;
  z-index: 5;
}
.ms-register .el-input__inner {
  border: 1px solid rgba(64, 130, 250, 0.8);
  color: #fff !important;
}
/* // 改变input里的字体颜色 */
.ms-register input::-webkit-input-placeholder {
  color: #17a1e5;
  font-size: 15px;
}
/* // 改变input框背景颜色 */
.ms-register .el-form .el-form-item .el-input__inner {
  background-color: transparent !important;
  border: 1px solid #1296db;
}
.ms-register span {
  color: #17a1e5;
}

.register-btn {
  text-align: center;
}

.register-btn button {
  background-color: transparent !important;
  border: 1px solid #1296db;
  color: #17a1e5;
  width: 100%;
  height: 36px;
}

.code {
  width: 112px;
  height: 35px;
  border: 1px solid #ccc;
  float: right;
  border-radius: 2px;
}

.validate-code {
  width: 136px;
  float: left;
}

.register {
  font-size: 14px;
  line-height: 30px;
  color: #999;
  cursor: pointer;
  float: right;
}

.register-box .canvaszz {
  width: 100%;
  background-image: url(../../../img/bg2.png);
  height: 800px;
  position: absolute;
  z-index: 1;
  filter: alpha(opacity=40);
  -moz-opacity: 0.4;
  -khtml-opacity: 0.4;
  opacity: 0.4;
}
</style>
